<template>
  <el-dialog :title="title" :visible.sync="open" width="780px" append-to-body :close-on-click-modal="false">
    <el-form ref="form" :model="request" size="small" label-width="110px" label-position="left" v-if="request">
      <div class="title">订单信息</div>

      <el-form-item label="订单号：" prop="orderId">
        {{request.orderId}}
      </el-form-item>

      <el-form-item label="产品体验链接：" prop="callbackUrl" v-if="request.callbackUrl">
        {{request.callbackUrl}}
      </el-form-item>

      <el-form-item label="下单时间：" prop="createTime">
        {{request.createTime}}
      </el-form-item>

      <el-form-item label="订单状态：" prop="status">
        <md-dict-tag :options="dictData['md_order_status']" :props="{ label: 'dictLabel', value: 'dictValue' }" :value="request.status" />
      </el-form-item>

      <el-form-item label="产品名称：" prop="productTitle">
        {{request.productTitle}}
      </el-form-item>

      <el-form-item label="申请说明：" prop="remark">
        {{request.remark}}
      </el-form-item>

      <div class="title">用户信息</div>

      <el-form-item label="用户邮箱：" prop="userEmail">
        {{request.userEmail}}
      </el-form-item>

      <el-form-item label="用户昵称：" prop="userNick">
        {{request.userNick}}
      </el-form-item>

      <div class="title">体验师信息</div>

      <template v-if="request.experiencerUser">
        <el-form-item label="姓名：" prop="ExperiencerUserName">
          {{request.experiencerUser.name}}
        </el-form-item>

        <el-form-item label="性别：" prop="ExperiencerUserSex">
          <md-dict-tag v-model="request.experiencerUser.sex" :options="dictData['sys_user_sex']" />
        </el-form-item>

        <el-form-item label="邮箱：" prop="ExperiencerUserEmail">
          {{request.experiencerUser.email}}
        </el-form-item>

        <el-form-item label="手机号：" prop="ExperiencerUserPhone">
          {{request.experiencerUser.phone}}
        </el-form-item>

        <el-form-item label="城市：" prop="ExperiencerUserCity">
          {{request.experiencerUser.city}}
        </el-form-item>

        <el-form-item label="国家：" prop="ExperiencerUserCountry">
          {{request.experiencerUser.country}}
        </el-form-item>

        <el-form-item label="州/省/地区：" prop="ExperiencerUserState">
          {{request.experiencerUser.state}}
        </el-form-item>

        <el-form-item label="邮编：" prop="ExperiencerUserZipCode">
          {{request.experiencerUser.zipCode}}
        </el-form-item>

        <el-form-item label="地址：" prop="ExperiencerUserAddress">
          {{request.experiencerUser.address}}
        </el-form-item>

        <el-form-item label="擅长领域：" prop="ExperiencerUserScopes">
          <el-tag v-for="item in dictData['md_scopes'].filter(e=>(request.experiencerUser.scopes || '').split(',').includes(e.dictValue))" :key="item.dictValue">{{item.dictLabel}}</el-tag>
        </el-form-item>

        <el-form-item label="影响力：" prop="ExperiencerUserInfluence">
          <div style="border: 1px solid #efefef; padding: 10px;">
            <el-row v-for="(item, index) in JSON.parse(request.experiencerUser.influence || '[]')" :key="index" style="margin-bottom: 15px; border-bottom: 1px solid #efefef;">
              <el-col :span="24">
                <span class="label">平台：</span>
                <span class="value">
                  {{item.platform}}
                </span>
              </el-col>
              <el-col :span="24">
                <span class="label">平台地址：</span>
                <span class="value">
                  {{item.link}}
                </span>
              </el-col>
              <el-col :span="24">
                <span class="label">平台粉丝数：</span>
                <span class="value">
                  {{item.fansNumber}}
                </span>
              </el-col>
            </el-row>
          </div>
        </el-form-item>

        <el-form-item label="作品：" prop="ExperiencerUserWorks">
          <div style="border: 1px solid #efefef; padding: 10px;">
            <el-row :gutter="20" class="works-item" v-for="(item, index) in JSON.parse(request.experiencerUser.works || '[]')" :key="index" style="margin-bottom: 15px; border-bottom: 1px solid #efefef;">
              <el-col :span="24">
                {{item.link}}
              </el-col>
            </el-row>
          </div>
        </el-form-item>

        <el-form-item label="状态：" prop="ExperiencerUserStatus">
          <md-dict-tag :options="dictData['md_user_experiencer_status']" v-model="request.experiencerUser.status"></md-dict-tag>
        </el-form-item>

        <el-form-item label="审核失败原因：" prop="ExperiencerUserReason" v-if="request.experiencerUser.status==='3'">
          {{request.experiencerUser.reason}}
        </el-form-item>

        <el-form-item label="备注：" prop="ExperiencerUserRemark">
          {{request.experiencerUser.remark}}
        </el-form-item>
      </template>

      <div class="title">收货信息</div>

      <el-form-item label="收货人：" prop="addressName">
        {{request.addressName??'---'}}
      </el-form-item>

      <el-form-item label="电话号码：" prop="addressPhone">
        {{request.addressPhone??'---'}}
      </el-form-item>

      <el-form-item label="邮箱：" prop="addressEmail">
        {{request.addressEmail??'---'}}
      </el-form-item>

      <el-form-item label="邮编：" prop="addressZipCode">
        {{request.addressZipCode??'---'}}
      </el-form-item>

      <el-form-item label="城市：" prop="addressCity">
        {{request.addressCity??'---'}}
      </el-form-item>

      <el-form-item label="州/省/地区：" prop="addressState">
        {{request.addressState??'---'}}
      </el-form-item>

      <el-form-item label="国家：" prop="addressCountry">
        {{request.addressCountry??'---'}}
      </el-form-item>

      <!-- <el-form-item label="省：" prop="addressProvince">
        {{request.addressProvince??'---'}}
      </el-form-item>

      <el-form-item label="地区：" prop="addressRegion">
        {{request.addressRegion??'---'}}
      </el-form-item> -->

      <el-form-item label="详细地址：" prop="addressDetail">
        {{request.addressDetail??'---'}}
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleCancel()">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { mdGetDictData } from '@/ddd/dict.service.js'
export default {
  name: 'MdOrderDetailDialogComponent',
  props: {
    data: {
      type: Object,
      default: () => { }
    }
  },
  data () {
    return {
      title: '订单详情',
      open: false,
      request: { ...this.data },
      dictData: {}
    }
  },
  watch: {
    data: {
      handler (_data) {
        if (_data) {
          this.request = { ..._data }
        } else {
          this.request = undefined
        }
      },
      deep: true,
      immediate: true
    }
  },
  mounted () {
    mdGetDictData(['md_order_status', 'sys_user_sex', 'md_user_experiencer_status', 'md_scopes']).then(res => {
      this.dictData = res
    })
  },
  methods: {
    handleOpen () {
      this.open = true
    },
    handleCancel () {
      this.open = false

      const request = Object.assign({}, { ...this.request })

      const keys = Object.keys(request)
      if (keys.length > 0) {
        keys.forEach(key => {
          delete request[key]
        })
      }

      this.request = { ...request }
    }
  }
}
</script>

<style lang="less" scoped>
.title {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 15px;
  border-top: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
  padding-bottom: 15px;
  padding-top: 15px;
}
</style>